<template>
  <view class="content">
    <view class="tools-box">
      <view class="text-icons">
        <block
          v-for="(item, index) in dragList"
          :key="index"
        >
          <view class="text active" v-if="item.active">
            <image
              src="@/static/images/icon/text-selected.png"
              class="icon"
              mode="aspectFill"
            ></image>
          </view>
          <view class="text" v-else>
            <image
              src="@/static/images/icon/text-unselected.png"
              class="icon"
              mode="aspectFill"
            ></image>
          </view>
        </block>
        <view class="text" @click="addText">
          <image
            src="@/static/images/icon/add-text.png"
            class="icon"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view class="sub-btns">
        <view class="btn" @click="saveImage('prev')"> 预览 </view>
        <view class="btn" @click="saveImage('submit')"> 提交作品 </view>
      </view>
    </view>
    <view class="canvas-box">
      <template v-if="selectTemplate">
        <image
          :src="selectTemplate.image"
          mode="widthFix"
          class="canvas-background-image"
					id="canvasItem"
        ></image>
        <view class="item" v-for="(item, index) in dragList" :key="index">
          <view
						@touchstart.stop.prevent="handStart"
						@touchmove.stop.prevent="handMove"
            :data-index="index"
						class="block"
						:class="item.active ? 'on' : ''"
            :style="{
              transform: 'rotate(' + item.rotate + 'deg)',
              top: item.y + 'rpx',
              left: item.x + 'rpx',
            }">

					<image
            :id="`dg_container${index}`"
						:key="index"
						:src="item.val"
						class="border-image"
						:class="item.active ? 'on' : ''"
						:style="{
              width: item.width + 'rpx',
            }"
						mode="widthFix"
						>
					</image>
					<image
						src="/static/images/icon/close.png"
						mode="aspectFill"
						class="close"
						@touchstart.stop.prevent="delTemp(index)"
					></image>

          <image
            src="/static/images/icon/scale.png"
            mode="aspectFill"
            class="scale"
            data-name="scale"
            :data-direction="item.direction"
            @touchstart.stop.prevent="imageStart"
            @touchmove.stop.prevent="imageMove"
          >
          </image>
          <image src="https://p3.toutiaoimg.com/origin/pgc-image/fa99726a6ce64259b64da5259feef88e"
            mode="aspectFill" class="rotate" data-name="rotate" :data-direction="item.direction"
            @touchstart.stop.prevent="imageStart" @touchmove.stop.prevent="imageMove">
          </image>
          </view>
        </view>
      </template>
      <template v-else>
        <image
          src="https://qiniu-res.jintianwang.cc/20221212165919-d1deaa66c29f585ba8e1cdad4eebf29a.png"
          mode="widthFix"
          class="canvas-background-image"
        ></image>
      </template>
    </view>
    <view class="edit-box">
      <view class="item">
        <view class="btn" @click="uploadImage"> 上传底图 </view>
        <view class="btn" @click="addText"> 添加文字 </view>
      </view>
      <template v-if="dragList.length > 0">
        <view class="item">
          <input
            type="text"
            placeholder="请输入文字"
            :value="dragList[index].text"
            class="input"
            @input="getText"
          />
        </view>
        <view class="item">
          <view class="gray font" @click="openFont">
            <view class="text">{{ dragList[index].familyText }}</view>
            <image src="@/static/images/icon/down.png" class="down"></image>
          </view>
          <view class="gray font" @click="openColor">
            <view
              class="color"
              :style="{ backgroundColor: dragList[index].color }"
            ></view>
            <view class="text">文本颜色</view>
            <image src="@/static/images/icon/down.png" class="down"></image>
          </view>
        </view>
        <view class="item">
          <view class="gray" @click="changeFontDirection">
            <image
              src="@/static/images/icon/direction.png"
              mode="aspectFill"
              class="bold"
            ></image>
            <view class="text" v-if="dragList[index].direction">纵向</view>
            <view class="text" v-else>横向</view>
          </view>
          <view class="gray">
            <image
              src="/static/images/icon/font-size.png"
              mode="aspectFill"
              class="size"
            ></image>
            <u-number-box
              :min="10"
              v-model="dragList[index].size"
              button-size="36"
              color="#333333"
              :disabledInput="true"
              bgColor="#f5f5f5"
              iconStyle="color: #333"
              @minus="minusFontSize"
              @plus="plusFontSize"
            ></u-number-box>
          </view>
        </view>
      </template>
    </view>
    <!-- 分类 -->
    <view class="category-list" v-if="navList.length > 0">
      <scroll-view
        scroll-x="true"
        :scroll-into-view="rolldistanceCate"
        :scroll-with-animation="true"
        class="cate-scroll"
      >
        <view
          :id="'cat' + (index + 1)"
          :class="item.id == catId ? 'item on' : 'item'"
          v-for="(item, index) in navList"
          :key="index"
          @click="navClick(item.id, 'cat' + index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view class="touxiang-list" v-if="!noData">
      <view
        class="item"
        :class="selectTemplate && item.id == selectTemplate.id ? 'on' : ''"
        v-for="(item, idx) in touxiangList"
        :key="idx"
        @click="selectTemp(idx, item)"
      >
        <image :src="item.thumb" mode="widthFix" class="thumb"></image>
      </view>
    </view>
    <view
      v-if="noData"
      class="u-flex u-flex-col u-col-center"
      style="
        width: 100vw;
        height: 78vh;
        padding-top: 200rpx;
        background-color: #ffffff;
      "
    >
      <view class="">
        <image
          style="width: 300rpx; height: 300rpx"
          src="/static/images/nodata.png"
        ></image>
      </view>
      <view class="u-tips-color u-font-12 u-p-t-30"> 没有数据哦~ </view>
    </view>
    <view class="" v-if="!noData">
      <u-loadmore
        :status="loadStatus"
        :load-text="loadText"
        font-size="24"
        margin-top="30"
        margin-bottom="30"
        color="#B8B8B8"
      />
    </view>
    <view class="hideCanvasView">
      <canvas
        class="hideCanvas"
        id="canvasId"
        canvas-id="canvasId"
        :style="{
          width: (canvasBakground.width || 10) + 'px',
          height: (canvasBakground.height || 10) + 'px',
        }"
      ></canvas>
    </view>
    <t-color-picker
      ref="colorPicker"
      :color="defaultColor"
      @confirm="selectColor"
    ></t-color-picker>
    <u-popup v-model="fontShow" mode="bottom" border-radius="14">
      <view class="popup-head">
        <view class="canle" @click="fontCanle">取消</view>
        <view class="confirm" @click="fontConfirm">确定</view>
      </view>
      <view class="popup-body">
        <scroll-view
          scroll-y="true"
          :scroll-into-view="rolldistance"
          :scroll-with-animation="true"
          class="cat-scroll"
        >
          <view
            class="item"
            :class="item.font_name == currentFont.font_name ? 'on' : ''"
            :id="'akun' + (index + 1)"
            v-for="(item, index) in allFontList"
            :key="index"
            @click="selectFont(item)"
          >
            <image :src="item.image" style="height: 100px" mode="heightFix" class="thumb"></image>
						<!-- <text>{{ item.title }}</text> -->
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-popup v-model="showPreview" mode="center" width="600" border-radius="8">
      <view class="kefu-info" v-if="previewImage">
				<scroll-view
          scroll-y="true"
          :scroll-into-view="rolldistance"
          :scroll-with-animation="true"
          style="max-height: 680rpx"
        >
					<image :src="previewImage" mode="widthFix" class="ewm"></image>
				</scroll-view>
        <view class="ewm-text">长按保存头像</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
	import QSCanvas from '@/utils/QuShe-SharerPoster/QuShe-SharerPoster/index.js';
	import tColorPicker from '@/components/color/color.vue';
	import { allFontList, textToImage, allArtFontTemplateCategory } from '@/api/artworks';
  import config from '@/utils/config'
	let qsc;
	let timer;
	export default {
		components: {
			tColorPicker
		},
		data() {
			return {
				canvasId: 'canvasId',
				canvasBakground: {
					width: 686,
					height: 686
				},
				currentIndex: 1,
				touxiangList: [],
				pageIndex: 1,
				loadStatus: 'loadmore',
				noData: false,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '亲，实在没有了'
				},
				noData: false,
				catId: 1,
				creatorInfo: null,
				dragList: [],
				selectTemplate: null, //选中的模板
				index: 9999, //默认选择
				defaultColor: {
					r: 0,
					g: 0,
					b: 0,
					a: 1
				},
				defaultColorStr: 'rgb(0,0,0)',
				fontShow: false,
				allFontList: [], // 字体列表
				currentFont: null, // 当前字体
				fontId: 1,
				// 滚动的位置
				rolldistance: '',
				uploadUrl: config.baseApi + '/common/upload/templateImage',
				navList: [],
				rolldistanceCate: '',
				showPreview: false,
				previewImage: '',
				selectItemParams: {
					degStart: 0,
					sStart: 0,
					originalWidth: 0,
					originalHeight: 0,
					originalRotate: 0,
					originalFont: 0,
				},
        canRotateFlag: false,
			}
		},
		onLoad() {
			let that = this;
			//准备海报绘制
			qsc = new QSCanvas({
				canvasId: that.canvasId,
				setCanvasWH: background => {
					this.canvasBakground = background
				}
			}, this);
			//加载分类模板
			this.getTouxiangCateList();
			//获取字体
			this.getFontList();
		},
		methods: {
			//切换菜单
			navClick(id, index) {
				var that = this
				if (id != that.catId) {
					if (index) that.rolldistanceCate = index
					that.noData = false;
					that.catId = id;
					that.getTouxiangList(id, 1);
				}
			},

			// 添加文字
			addText() {
				//判断是否有底图
				if (this.selectTemplate) {
					let color = this.defaultColorStr || 'rgb(0, 0, 0)';
					let text = {
						text: '默认内容',
						x: 100,
						y: 100,
						font: this.currentFont.font_name,
						familyText: this.currentFont.title,
						size: 60,
						color: color,
            direction: false,
						active: true,
						width: 0,
						height: 0,
            originWidth: 0,
            originHeight: 0,
            originFontSize: 60,
						type: 'image',
            rotate: 0,
            ratio: 1,
					};
					this.textToImage(text, this.index).then(result => {
						if (result && result.image) {
							text.val = result.image;
							text.width = result.width;
							text.height = result.height;
							text.originWidth = result.width;
							text.originHeight = result.height;
              if (this.dragList && this.dragList.length > 0) {
                this.dragList.forEach(item => {
                  item.active = false;
                })
              }
							this.dragList.push(text);
							this.index = this.dragList.length - 1;
						}
					});
				} else {
					uni.showToast({
						title: '请先上传底图',
						icon: 'none'
					})
				}
			},

			// 改变字体图片
			changeTextArrt(changeType) {
				this.textToImage(this.dragList[this.index]).then(result => {
					if (result && result.image) {
						this.dragList[this.index].width = result.width;
						this.dragList[this.index].height = result.height;
						if (changeType === 'font') {
							this.dragList[this.index].originWidth = result.width;
							this.dragList[this.index].originHeight = result.height;
							// this.dragList[this.index].originFontSize = result.size;
						}
						this.dragList[this.index].val = result.image;
					}
				});
			},

			// 选择字体
			openFont() {
				this.fontShow = true;
			},

			//切换字体
			selectFont(item) {
				var that = this
				that.currentFont = item;
			},

			// 确定选择字体
			fontConfirm() {
				this.fontShow = false;
				this.dragList[this.index].font = this.currentFont.font_name;
				this.changeTextArrt('font');
			},

			// 取消选择字体
			fontCanle() {
				this.fontShow = false
			},

			//选择模板
			async selectTemp(index, item) {
				let that = this;
				if (that.selectTemplate) {
					if (item.id != that.selectTemplate.id) {
						uni.showModal({
							title: '温馨提示',
							content: '更换模板会清除已有内容',
							confirmColor: '#56d39d',
							success: function(res) {
								if (res.confirm) {
									that.selectTemplate = item;
									if (item.content) {
										that.textToImage(item.content);
									} else {
										that.dragList = [];
									}
								}
							}
						});
					}
				} else {
					that.selectTemplate = item;
					if (item.content) {
						await that.textToImage(item.content);
					}
				}
				//返回顶部
				uni.pageScrollTo({
					scrollTop: 0
				})
			},

			// 删除
			delTemp(index) {
				this.dragList.splice(index, 1);
				this.index = 0;
			},

			//改变文字方向
			changeFontDirection() {
				this.dragList[this.index].direction = this.dragList[this.index].direction ? false : true;
				this.changeTextArrt('font');
			},

			//增加字体大小
			plusFontSize(e) {
				this.dragList[this.index].size = e.value;
				this.dragList[this.index].width += 2;
				this.dragList[this.index].height += 2;
				this.changeFontSize();
			},

			// 改变字体大小
			minusFontSize(e) {
				this.dragList[this.index].size = e.value;
				this.dragList[this.index].width -= 2;
				this.dragList[this.index].height -= 2;
				this.changeFontSize();
			},

			// 修改字体
			changeFontSize() {
				if (timer) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					this.changeTextArrt();
					timer = null;
				}, 800);
			},

			//获取文字
			getText(e) {
				let val = e.target.value;
				if (val.length < 1) {
					uni.showToast({
						title: '不能为空',
						icon: 'none'
					})
				} else {
					this.dragList[this.index].text = val;
					// this.textToImage(this.dragList);
					this.changeFontSize();
				}
			},
	
			//打开颜色选择器
			openColor() {
				this.$refs.colorPicker.open();
			},

			// 确定选择颜色
			selectColor(e) {
				let color = 'rgb(' + e.rgba.r + ',' + e.rgba.g + ',' + e.rgba.b + ')';
				this.dragList[this.index].color = color;
				this.defaultColor = e.rgba;
				this.defaultColorStr = color;
				this.changeTextArrt();
			},

			handStart(e) {
				for (let i = 0; i < this.dragList.length; i++) {
					this.dragList[i].active = false;
					if (e.currentTarget.dataset.index == i) {
						this.index = i;
						this.dragList[i].active = true; // 当前选中
					}
				}

				// 移动前点击的位置
				this.beforeMove = {
					x: e.touches[0].clientX + 1,
					y: e.touches[0].clientY - 1
				}
			},

			handMove(e) {
				let selectItem = this.dragList[this.index];
				//移动时
				this.afterMove = {
					x: e.touches[0].clientX,
					y: e.touches[0].clientY
				}
				let speed = 1.5;
				//改动值赋值给当前原生属性
				selectItem.x += (this.afterMove.x - this.beforeMove.x) * speed; // x方向
				selectItem.y += (this.afterMove.y - this.beforeMove.y) * speed; // y方向
				// 新的位置复制为移动前的位置
				this.beforeMove = {
					x: e.touches[0].clientX,
					y: e.touches[0].clientY
				}
			},

      // 图片的放大仿效
			imageStart(e) {
				const that = this;
				let selectItem = this.dragList[this.index]; // 当前选择的元素
				this.canRotateFlag = false;
				const query = uni.createSelectorQuery().in(this);
				query.select(`#dg_container${this.index}`).boundingClientRect(data => {
					this.beforeMove = {
						x: (data.left + data.right) / 2,
						y: (data.top + data.bottom) / 2
					}
					let n = Math.pow(Math.pow(e.changedTouches[0].clientY - (data.top + data.bottom) / 2, 2) + Math
						.pow(e.changedTouches[0].clientX - (data.left + data.right) / 2, 2), .5);
					let o = 180 * Math.acos(Math.abs(e.changedTouches[0].clientX - (data.left + data.right) / 2) /
						n) / Math.PI;
					let s = e.changedTouches[0].clientX - (data.left + data.right) / 2;
					let r = e.changedTouches[0].clientY - (data.top + data.bottom) / 2;
          if (!selectItem.direction) {
            s > 0 ? r > 0 && (o = 360 - o) : r > 0 ? o += 180 : o = 180 - o;
          }
					this.selectItemParams.degStart = o;
					this.selectItemParams.sStart = n;
					this.selectItemParams.originalWidth = o;
					this.selectItemParams.originalHeight = n;
					this.selectItemParams.originalRotate = selectItem.rotate;
					this.selectItemParams.originalFont = selectItem.size;
					let time = setTimeout(() => {
						clearTimeout(time);
						this.canRotateFlag = !0;
					})
				}).exec();
			},

			imageMove(t) {
				let type = t.currentTarget.dataset.name; // 当前操作的类型
				let selectItem = this.dragList[this.index]; // 当前选择的元素
				let e = 0;
				if (!selectItem.direction) {
					e = Math.pow(Math.pow(t.changedTouches[0].clientY - this.beforeMove.y, 2) + Math.pow(t.changedTouches[
						0].clientX - this.beforeMove.x, 2), .5);
				} else {
					e = Math.pow(Math.pow(t.changedTouches[0].clientY - this.beforeMove.y, 2) + Math.pow(t.changedTouches[
						0].clientX - this.beforeMove.x, 2), .5);
				}
				let a = 180 * Math.acos(Math.abs(t.changedTouches[0].clientX - this.beforeMove.x) / e) / Math.PI;
				let n = t.changedTouches[0].clientX - this.beforeMove.x;
				let o = t.changedTouches[0].clientY - this.beforeMove.y;
				n > 0 ? o > 0 && (a = 360 - a) : o > 0 ? a += 180 : a = 180 - a;
				let s = Math.floor(this.selectItemParams.degStart - a);
				let r = e / this.selectItemParams.sStart;
        let width = this.selectItemParams.originalWidth * r.toFixed(2);
        let height = this.selectItemParams.originalHeight * r.toFixed(2);
        let ratio = width / selectItem.originWidth;
				if (type === 'scale') {
					selectItem.width = selectItem.originWidth * ratio.toFixed(2);
					selectItem.height = selectItem.originHeight * ratio.toFixed(2);
					selectItem.size = parseInt(selectItem.originFontSize * ratio.toFixed(1));
          this.changeFontSize();
				} else if (type === 'rotate') {
					selectItem.rotate = this.selectItemParams.originalRotate + s;
				}
			},

			//获取头像列表
			async getTouxiangList(type, on) {
				let that = this;
				let listTem = that.touxiangList;
				if (on == 1) {
					listTem = []
					that.pageIndex = 1;
					that.noData = true
				}

				that.loadStatus = 'loading'
				var list = {}
				list = await this.$u.api.touxiangList({
					cId: type,
					page: that.pageIndex
				});

				//console.log(list);
				if (list.hasPage) {
					that.loadStatus = 'loadmore';
					that.pageIndex = that.pageIndex + 1;
				} else {
					that.loadStatus = 'nomore';
				}
				if (on == 2) {
					listTem = [];
				}
				listTem = listTem.concat(list.data)
				that.touxiangList = listTem;
				if (that.touxiangList.length == 0) that.noData = true
				else that.noData = false
			},

			//下拉
			async onReachBottom() {
				let that = this;
				console.log('bottom');
				if (that.loadStatus == 'nomore') return
				await that.getTouxiangList(that.catId)
			},

			//制作字体图片
			async textToImage(item, index) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true,
					direction: 20 * 1000
				})
				return new Promise((resolve, reject) => {
					textToImage(item).then(result => {
						if (result.code == 200 && result.data) {
							const data = result.data;
							uni.hideLoading();
							resolve(data);
						} else {
							uni.showToast({
								icon: 'none',
								title: result.msg
							})
							reject();
						}
					}).catch(error => {
						reject();
					});
				})
			},

			//获取字体
			async getFontList() {
				let that = this;
				allFontList().then(result => {
					if (result.code == 200 && result.data && result.data.length > 0) {
						that.allFontList = result.data;
						this.currentFont = result.data[0];
					} else {
						uni.showToast({
							icon: 'none',
							title: '请添加字体文件在使用该功能'
						})
					}
				});
			},

			// 模板分类列表
			async getTouxiangCateList() {
				let that = this;
				allArtFontTemplateCategory().then(result => {
					if (result.code == 200 && result.data && result.data.length > 0) {
						that.navList = result.data;
						// that.catId = result.data[0].id;
						// that.getTouxiangList(that.catId, 2);
					} else {
						uni.showToast({
							icon: 'none',
							title: result.msg
						})
					}
				});
			},

			//保存海报
			async saveImage(type) {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				let canvasW = 0;
				let canvasH = 0;
				let ratio = 1;
				query.select('#canvasItem').boundingClientRect(data => {
					canvasW = data.width * 2;
					canvasH = data.height * 2;
					ratio = parseFloat(canvasW / 680).toFixed(4);
					ratio = Number(ratio);
					console.log(ratio);
				}).exec();
				// 动态设置
				await qsc.updateCanvasWH({
					width: canvasW,
					height: canvasH,
				})
				console.log(canvasW, canvasH);
				//判断是预览还是发布
				if (that.selectTemplate) {
					if (type == 'prev') {
						uni.showLoading({
							title: '生成中...'
						})
						if (that.dragList) {
							//绘制背景
							let last = await qsc.drawImg({
								val: that.selectTemplate.image,
								x: 0,
								y: 0,
								width: canvasW,
								height: canvasH
							});

							// 绘制列表
							let drawList = JSON.stringify(that.dragList);
							drawList = JSON.parse(drawList);
							drawList.forEach(item => {
								item.x = parseInt(item.x * ratio);
								item.y = parseInt(item.y * ratio);
								item.width = parseInt(item.width * ratio);
								item.height = parseInt(item.height * ratio);
							})

							last = await qsc.drawArray(drawList);
						} else {
							//绘制底图
							let last = await qsc.drawImg({
								val: that.selectTemplate.image,
								x: 0,
								y: 0,
								width: canvasW,
								height: canvasH
							});
							//在覆盖背景
							last = await qsc.drawImg({
								val: that.selectTemplate.image,
								x: 0,
								y: 0,
								width: canvasW,
								height: canvasH
							});
						}

						await qsc.draw();

						uni.canvasToTempFilePath({
							canvasId: that.canvasId,
							success: function(tempRes) {
								// 在H5平台下，tempFilePath 为 base64
								let temp = tempRes.tempFilePath;
								that.previewImage = temp;
								that.showPreview = true;
								uni.hideLoading();
							},
						});
					} else {
						if (that.dragList.length > 0) {
							that.selectTemplate.content = that.dragList;
						}
						let params = {
							'userid': this.creatorInfo.id,
							'username': this.creatorInfo.name,
							'imgs': that.selectTemplate,
							'catid': 19,
							'moxing': 'template',
							'videoUrl': that.selectTemplate.image
						}
						this.$u.api.pictureAdd(params).then(result => {
							if (result.code == 0) {
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateBack()
								}, 1500)
							}
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先上传底图'
					})
				}
			},
			//上传底图
			uploadImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function(res) {
						let temp = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: that.uploadUrl,
							filePath: temp[0],
							name: 'file',
              header: {
                businessId: 6
              },
							success: (imgRes) => {
								let result = JSON.parse(imgRes.data)
								if (result.code == 200 && result.data) {
									var selectTemplate = new Object();
									selectTemplate.id = 999999999;
									selectTemplate.image = result.data.cover_path;
									that.selectTemplate = selectTemplate;
									uni.showToast({
										icon: 'none',
										title: result.msg
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '上传失败，请重试'
									})
								}
							},
							fail: function(e) {
								console.log(e);
							}
						});
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			// 颜色格式 hex 转 rgba
			formatRgba(bgColor) {
				//console.log(bgColor);
				let color = bgColor.slice(4);
				color = color.slice(0, -1).replace(/\s+/g, "");
				let colorObj = color.split(',');
				return {
					r: parseInt(colorObj[0]),
					g: parseInt(colorObj[1]),
					b: parseInt(colorObj[2]),
					a: 1
				};
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content {
		position: relative;
	}

	.canvas-box {
		position: relative;
		width: 680rpx;
		min-height: 680rpx;
		margin: 0 auto;
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.block {
		position: absolute;
		text-align: center;
		line-height: 1;
		z-index: 1;
	}

	.block .pic {
		width: 100%;
		height: auto;
	}

	.drag {
		position: absolute;
		text-align: center;
		margin: 6rpx;
		line-height: 1;
		z-index: 99;
	}

	.block .border-image{
		border: 4rpx dashed #fff;
	}

	.block .on {
		border-color: #d81e06;
	}

	.block .close,
	.block .scale,
	.block .rotate {
		display: none;
		z-index: 999;
	}

	.block.on .close {
		display: block;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background-color: #fff;
		padding: 10rpx;
		top: -26rpx;
		left: -26rpx;
		border-radius: 50%;
		border: solid 1px #d81e06;
		z-index: 999;
	}

	.block.on .scale {
		display: block;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background-color: #fff;
		padding: 10rpx;
		bottom: -26rpx;
		/* top: -26rpx; */
		right: -26rpx;
		border-radius: 50%;
		border: solid 1px #d81e06;
		z-index: 100;
	}

	.block.on .rotate {
		display: block;
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background-color: #fff;
		padding: 10rpx;
		/* bottom: -26rpx; */
		top: -26rpx;
		right: -26rpx;
		border-radius: 50%;
		border: solid 1px #d81e06;
		z-index: 100;
	}

	.tools-box {
		width: 680rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tools-box .text-icons {
		display: flex;
		align-items: center;
	}

	.tools-box .text-icons .text {
		background-color: #f5f5f5;
		margin-right: 20rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
	}

	.tools-box .text-icons .text.active {
		background-color: $uni-color-primary;
	}

	.tools-box .text-icons .icon {
		width: 30rpx;
		height: 30rpx;
	}

	.sub-btns {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sub-btns .btn {
		background-color: $uni-color-primary;
		color: #fff;
		font-size: 24rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		padding: 0 20rpx;
		border-radius: 4rpx;
	}

	.edit-box {
		margin: 30rpx 10px;
	}

	.edit-box .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 10rpx;
	}

	.edit-box .item .btn {
		width: calc(50% - 10rpx);
		color: $uni-color-primary;
		background: #f3f7fb;
		border: 2rpx solid $uni-color-primary;
		line-height: 70rpx;
		font-size: 26rpx;
		height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.edit-box .item .input {
		width: 100%;
		background-color: #f5f5f5;
		font-size: 24rpx;
		height: 88rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.edit-box .item .gray {
		height: 88rpx;
		width: calc(50% - 10rpx);
		display: flex;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
	}

	.edit-box .item .gray .size {
		width: 40rpx;
		height: 35rpx;
		margin-right: 20rpx;
	}

	.edit-box .item .gray.font {
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.edit-box .item .gray.font .down {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-box .item .gray.font .color {
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: $uni-color-primary;
	}

	.edit-box .item .gray.font .text {
		flex: 1;
	}

	.edit-box .item .gray .bold {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.touxiang-list {
		margin: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.touxiang-list .item {
		width: calc(20% - 20rpx);
		margin-right: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 10rpx;
		font-size: 0;
	}

	.touxiang-list .item:nth-child(5n) {
		margin-right: 0;
	}

	.touxiang-list .item.on {
		border: solid 2rpx $uni-color-primary;
		position: relative;
	}

	.touxiang-list .item.on::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
		border-radius: 10rpx;
	}

	.touxiang-list .item.on::after {
		font: normal normal normal 18px/1 "uicon-iconfont";
		content: "\e63d";
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -18rpx;
		margin-top: -18rpx;
		color: #fff;
		z-index: 99;
	}

	.touxiang-list .item .thumb {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
	}

	.canvas-background-image {
		width: 100%;
		height: auto;
		pointer-events: none;
		user-select: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}

	.popup-head {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 98rpx;
		border-bottom: solid 1rpx #f5f5f5;
	}

	.popup-head .canle {
		color: #999;
	}

	.popup-head .confirm {
		color: $uni-color-primary;
	}

	.popup-body .cat-scroll {
		height: 500rpx;
		white-space: nowrap;
	}

	.popup-body .item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		border-bottom: solid 1rpx #f5f5f5;
	}

	.popup-body .item .thumb {
		width: 300rpx;
		opacity: 0.2;
	}

	.popup-body .item.on .thumb {
		opacity: 1;
	}

	.category-list {
		margin: 0 30rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		padding: 24rpx;
		border-radius: 10rpx;
	}

	.category-list .cate-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.category-list .cate-scroll .item {
		font-size: 30rpx;
		padding: 0 20rpx;
		display: inline-block;
	}

	.category-list .cate-scroll .item:first-child {
		padding-left: 0;
	}

	.category-list .cate-scroll .item:first-child:last-child {
		padding-right: 0;
	}

	.category-list .cate-scroll .item.on {
		color: $uni-color-primary;
		font-weight: bold;
	}

	.kefu-info {
		font-size: 0;
		padding: 24rpx 24rpx 0 ;
	}

	.ewm {
		width: 100%;
	}

	.ewm-text {
		background-color: $uni-color-primary;
		color: #fff;
		width: 260rpx;
		text-align: center;
		border-radius: 40rpx;
		padding: 20rpx 0;
		margin: 20rpx auto;
		font-size: 28rpx;
	}

	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
</style>
